<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function for drawing arrows
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 8) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Diagram parameters
        const x_wire = 100;
        const b = 80;
        const a = 150;
        const h = 130;
        const y_base = 210;

        // Coordinates
        const wire_y_start = 50;
        const wire_y_end = 290;
        const xA = x_wire + b;
        const yA = y_base;
        const xB = xA;
        const yB = y_base - h;
        const xC = xA + a;
        const yC = y_base;

        // 1. Draw the long straight wire and current I
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 18px Times New Roman';
        drawArrow(ctx, x_wire, wire_y_end, x_wire, wire_y_start);
        ctx.fillText('I', x_wire - 25, (wire_y_start + wire_y_end) / 2 - 40);

        // 2. Draw the triangle ABC
        ctx.beginPath();
        ctx.moveTo(xA, yA);
        ctx.lineTo(xB, yB);
        ctx.lineTo(xC, yC);
        ctx.closePath();
        ctx.stroke();

        // 3. Label vertices A, B, C
        ctx.font = '18px Times New Roman'; // Non-italic for vertex labels
        ctx.fillText('A', xA - 15, yA + 8);
        ctx.fillText('B', xB, yB - 15);
        ctx.fillText('C', xC + 15, yC + 8);

        // 4. Draw velocity vector v
        ctx.lineWidth = 1.5;
        const v_y = (yB + yC) / 2;
        const v_x_start = xC + 40;
        const v_x_end = v_x_start + 60;
        drawArrow(ctx, v_x_start, v_y, v_x_end, v_y);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('v', (v_x_start + v_x_end) / 2, v_y - 15);

        // 5. Draw angle theta
        ctx.lineWidth = 1;
        const angle_radius = 25;
        const angle_val = Math.atan(h / a);
        ctx.beginPath();
        ctx.arc(xC, yC, angle_radius, Math.PI, Math.PI - angle_val, true);
        ctx.stroke();
        ctx.fillText('θ', xC - angle_radius - 15, yC - 12);

        // 6. Draw dimension lines 'a' and 'b'
        const y_dim = y_base + 30;
        const tick_height = 10;
        
        // Dimension b
        // Vertical Ticks
        ctx.beginPath();
        ctx.moveTo(x_wire, y_dim - tick_height / 2);
        ctx.lineTo(x_wire, y_dim + tick_height / 2);
        ctx.moveTo(xA, y_dim - tick_height / 2);
        ctx.lineTo(xA, y_dim + tick_height / 2);
        ctx.stroke();
        // Arrows
        const b_mid = (x_wire + xA) / 2;
        const b_gap = 12;
        drawArrow(ctx, b_mid - b_gap, y_dim, x_wire, y_dim, 6);
        drawArrow(ctx, b_mid + b_gap, y_dim, xA, y_dim, 6);
        ctx.fillText('b', b_mid, y_dim);
        
        // Dimension a
        // Vertical Tick at C
        ctx.beginPath();
        ctx.moveTo(xC, y_dim - tick_height / 2);
        ctx.lineTo(xC, y_dim + tick_height / 2);
        ctx.stroke();
        // Arrows
        const a_mid = (xA + xC) / 2;
        const a_gap = 12;
        drawArrow(ctx, a_mid - a_gap, y_dim, xA, y_dim, 6);
        drawArrow(ctx, a_mid + a_gap, y_dim, xC, y_dim, 6);
        ctx.fillText('a', a_mid, y_dim);

        // 7. Draw the bottom text
        ctx.font = '20px KaiTi'; // Use a font that supports Chinese characters
        ctx.fillText('习题 9-6 图', canvas.width / 2, y_dim + 45);
    </script>
</body>
</html>